<template>
	<div>
		<mainTop></mainTop>
		<div class="zsxqMiddleBox" >
			<div class="zstpHead" style="position: relative;">
				<div class="zstpTitle" style="color: #150e52;text-align: center;">
					<span style="font-size: 36px;font-weight: 600;">{{ this.pclist.rows[0].exhibitorname }}</span>
					<span style="font-size: 18px;font-family: PingFangSC-Semibold, sans-serif;margin-left: 30px;">主营产品：{{ this.pclist.rows[0].product }}</span>
				</div>
				
				
				
				  
				  
			</div>
			<div style="background-color: #dde6f7;" class="zsDetail">
				<div class="zsCardBox1"
				   @mouseenter=""
				   @mouseleave="">
				   <div class="swiper-button-prev swiper-button-prev2"></div>
				   <swiper ref="swiper"
				     :options="options" >
				     <swiper-slide v-for="(item,index) in pcimg"
				       :key="index">
				       <div class="zsCard1">
							<img :src="'https://zha.heavenk.com/prod-api'+item" alt="" style="width: 100%;height: 100%;">
				       </div>
				     </swiper-slide>
				   </swiper>
				   <div class="swiper-button-next swiper-button-next2"></div>
				 </div>
				 
				 
			</div>
			<div class="sjxx">
				<div style="color: #150e52;font-size: 24px;font-weight: 600;text-align: center;">
					商家信息
				</div>		
				<table class="sjColumn" style="word-wrap: break-word; word-break: break-all;">
					<tr>
						<td style="background-color: #eceaea;" class="columnName">
							注册类型
						</td>
						<td class="sjContent">{{ this.pclist.rows[0].state }}</td>
						<td style="background-color: #eceaea;" class="columnName">
							注册资本
						</td>
						<td class="sjContent">{{ this.pclist.rows[0].money }}</td>
					</tr>
					<tr>
						<td style="background-color: #eceaea;" class="columnName">
							主营展品
						</td>
						<td class="sjContent">{{ this.pclist.rows[0].product }}</td>
						<td style="background-color: #eceaea;" class="columnName">
							地址
						</td>
						<td class="sjContent">{{ this.pclist.rows[0].site }}</td>
					</tr>
					<tr>
						<td style="background-color: #eceaea;" class="columnName">
							联系人
						</td>
						<td class="sjContent">{{ this.pclist.rows[0].name }}</td>
						<td style="background-color: #eceaea;" class="columnName">
							电话
						</td>
						<td class="sjContent">{{ this.pclist.rows[0].exhibitiornumber }}</td>
					</tr>
					<tr style="min-height: 400px;line-height: 50px;">
						<td colspan="4" style="min-height: 40px;font-size: 16px;padding: 0px 10px;" v-html="this.pclist.rows[0].introductiontoexhibitors">
							
						</td>
					</tr>
				</table>
			</div>
			<div class="cpzx" v-if="total">
				<div style="color: #150e52;font-size: 24px;font-weight: 600;text-align: center;">
					产品中心
				</div>
					<div class="cpzxContent" style="">
						<div class="cpzx_module" v-for="(item,index) in product.rows" :key="index">
							<router-link  target="_blank" :to="{ path: '/productDetail', query: { id: item.id} }" style="text-decoration: none;">
							<div><img :src="'https://zha.heavenk.com/prod-api'+item.exhibitionproductspic" alt="" style="width: 272px;height: 243px;z-index: 100;"></div>
							<div style="padding: 10px 15px;">
								<div style="text-align: center;color: #150e52;font-size: 18px;
								font-weight: 600;overflow: hidden;height: 46px;">{{ item.product }}</div>
								<div style="text-align: left;color: #150e52;margin-top: 10px;padding-bottom: 20px;height: 30px !important;
								line-height: 23px;overflow: hidden;" v-html="item.productintroduction"></div>
							</div>
							</router-link>
						</div>
					</div>
			</div>
			<div style="width: 1140px;min-width: 1140px;margin: auto;margin-top: 38px;height: 40px;" v-if="total">
				<div style="height: 60px;float: right;">
						 <el-pagination
						      @size-change="handleSizeChange"
						      @current-change="handleCurrentChange"
						      :current-page.sync="currentPage"
						      :page-size="8"
						      layout="prev, pager, next"
						      :total="this.total">
						    </el-pagination>
							<div class="el-pagination__jump">
								共{{totalPageSize}}页，到第<div class="el-input el-pagination__editor is-in-pagination">
									<input type="text" class="inputNum" v-model="pageInputNum"
									oninput="value=value.replace(/[^\d]/g,'');
									if(value<=0)value='';if(value.length > 1 && value.substr(0,1) ==0 && value.substr(1,1) !='.'){
									value= value.substr(1,1)}" >
							</div>
							页
							</div>
							
						<button class="button1" style=""  @click="changePage">确定</button>
				</div>
			</div>
		</div>
		<mainBottom></mainBottom>
	</div>
</template>

<script>
	import 'swiper/css/swiper.css'
	import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
	import mainTop from '../components/mainTop.vue'
	import mainBottom from '../components/mainBottom.vue'
	import axios from 'axios'
	export default {
	  components: { 
		  mainTop,
		  mainBottom,
		  Swiper,
		  SwiperSlide,
	   },
	   data(){
			return{
				currentBrandName:'options1',
				 options: {
				 				        pagination: {
				 				          el: ".case-swiper-pagination"
				 				          //区分不同Swiper的组件
				 				        },
				 				        //显示分页
				 				        loop: true,
				 				        //开启循环
				 				        // loopedSlides: 6,
				 				        //设置平滑
				 				        slidesPerView: 1,
				 						 // spaceBetween:25,
				 				        //设置能够同时显示的数量（可设置 auto）
				 				        speed: 2000,
				 				        //切换速度
				 				 
				 				        navigation: {
				 				          prevEl: ".swiper-button-prev2",
				 				          nextEl: ".swiper-button-next2"
				 				        },
				 				        //左右箭头按钮(可自定义)
				 				 
				 				        // autoplay: false,
				 				        //是否开启自动轮播
				 				 
				 				        autoplay: {
				 				          delay: 3000,
				 				          stopOnLastSlide: false,
				 				          disableOnInteraction: false
				 				        },
				 				        // 开启自动轮播后，设置自动轮播的延迟时间
				 				        loopAdditionalSlides: 1,
				 				        //复制若干个slide
				 				         slidesPerGroup: 1,
				 				        // 定义slides的数量多少为一组，即每次切换slides的数量，默认每次切换一张
				 				        on: {
				 				          slideChangeTransitionEnd: function() {
				 				            // console.log(this.activeIndex);
				 				            //获取当前下标，切换结束时，告诉我现在是第几个slide
				 				          }
				 				        }
				 				      },
				
				pageSize: 16,
				totalCount: 1,
				totalPageSize:1,
				pageInputNum:'',
				currentPage: 1,
				videos:'',
				total:0,
				pclist:'',
				pcimg:'',
				product:'',
				zsid:'',
			};
	   },
		methods:{
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange() {
			//    this.contentPerPage.pn=this.currentPage;
			//    contentList(this.contentPerPage).then(response => {
			//            this.contentPerPageList = response.data;
			//          });
				this.getProduct(this.zsid,this.currentPage)
			},
			changeFirstPage(){
				this.currentPage=1;
				this.handleCurrentChange();
			},
			changeLastPage(){
				this.currentPage=this.totalPageSize;
				this.handleCurrentChange();
			},
			getTotalPageSize(){
				this.totalPageSize=this.totalCount/this.pageSize
			},
			changePage(){
				this.currentPage=parseInt(this.pageInputNum);
				this.handleCurrentChange();
			},
			getProduct(id,pnum){
				if (pnum===null) {
					pnum==1
				}
				axios.get('https://zha.heavenk.com/prod-api/web/two/list/'+id,{
					params:{
						pageSize:8,
						pageNum:pnum,
					}
				}).then((res)=>{
                    this.product=res.data
					this.total=res.data.total
					// console.log(this.total)
					this.totalPageSize=Math.ceil(this.total/8)
                })
			},
			getPclist(id){
				axios.get('https://zha.heavenk.com/prod-api/web/exhibitor/pclist/'+id).then((res)=>{
                    this.pclist=res.data
					this.pcimg=this.pclist.rows[0].exhibitorpictures.split(",")
					console.log(this.pcimg);
					if(this.pcimg.length<3){
						this.currentBrandName='options1'
					}else{
						this.currentBrandName='options'
					}
                })
			},
			
		},
		 computed: {
		    swiper() {
		      return this.$refs.swiper.$swiper;
		    }
		  },
			mounted(){
				if (localStorage.getItem('id')){
				      this.zsid= localStorage.getItem('id');
				      // localStorage.clear();
				};
				if(this.$route.query.id){
					const id = this.$route.query.id;
					this.zsid=id;
				}
				
				this.getPclist(this.zsid);
				this.getProduct(this.zsid);
				console.log('Receive id',this.zsid);
			}
		}
</script>

<style>
	.zsxqMiddleBox{
		width: 100%;
		min-width: 1700px;
		background-color: #f6f6f6;
	}
	.zstpHead{
		width: 1140px;
		min-width: 1140px;
		height: auto;
		margin: auto;
		margin-top: 45px;
	}
	.zsCardBox1 {
	  max-width: 1025px;
	  margin: 0 auto;
	  position: relative;
	  margin-top: 45px;
	      padding: 21px 0px;
	}
	.zsDetail{
		width: 100%;
		min-width: 1700px;
		background-color: #dde6f7;
		height: auto;
		margin: auto;
		margin-top: 45px;
	}
	/* .zsCardBox2 {
		width: 300px;
	  margin: 0 auto;
	  position: relative;
	  margin-top: 45px;
	      padding: 21px 0px;
	} */
	.zsCard1 {
	    width: 1025px;
	    height: 480px;
	    /* background: url("../images/zsImg.png") */
	      /* no-repeat; */
	    /* background-size: 325px 410px; */
	    position: relative;
	    cursor: pointer;
		overflow: hidden;
		
	  }
	  .zsCardBox1 .swiper-slide,.zsCardBox2 .swiper-slide {
	      transform: scale(1) !important;
	      width: 1025px !important;
	      height: 480px !important;
	  }
	  .zsCardBox1.swiper-slide.swiper-slide-active
	  {
		  transform: scale(1) !important;
		  width: 1025px !important;
		  height: 480px !important;
	  }
	  .zsDetail .swiper-button-prev{
		  left: -57px !important;
		  top: 50%;
		  background-color: #494478;
		  width: 37px;
		  height: 37px;
		  border-radius: 50%;
	  }
	  .zsDetail .swiper-button-next{
	  	right: -57px !important;
		top: 50%;
		background-color: #494478;
		width: 37px;
		height: 37px;
		border-radius: 50%;
		text-align: center;
	  }
	  .zsDetail .swiper-button-prev:after,.zsDetail .swiper-button-next:after {
	      font-size: 21px;
		  color: #fff;
	  }
	  .sjxx{
		width: 1140px;
		min-width: 1140px;
		height: auto;
		margin: auto;
		margin-top: 45px;  
	  }
	  .sjColumn{
	  	width: 100%;
	  	color: #150e52;
	  	border-collapse: collapse;
	  	border: 2px solid #eceaea;
	  	margin-top: 25px;
	  }
	  .sjColumn>tr>td{
	  	border-bottom: 2px solid #eceaea;
	  }
	  .columnName{
	  	width: 150px;
	  	/* min-height: 71px; */
	  	background-color: #eceaea;
	  	font-size: 18px;
	  	text-align: center;
	  	line-height: 70px;
		font-weight: 600;
	  }
	  .sjContent{
		  width: 440px;
		  padding-left: 50px;
		  font-size: 18px;
	  }
	  .cpzx{
	  		width: 1140px;
	  		min-width: 1140px;
	  		height: auto;
	  		margin: auto;
	  		margin-top: 30px;  
	  }
	  .cpzx_module{
	  	width: 272px;
	  	height: 370px !important;
	  	background-color: #fff;
	  	display: inline-block;
	  	margin-right: 17px;
	  	margin-top: 17px;
	  	overflow: hidden;
	  	position: relative;
	  	transition: all .2s;
	  }
	  .cpzx_module:hover .fg4,.cpzx_moduleRight:hover .fg4{
	  	left: 110%;
	  	transition: all .1s;
	  }
	  .fg4{
	  	position: absolute;
	  	left: -110%;
	  	top: 0;
	  	width: 593px;
	  	height: 340px;
	  	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
	  	transform: skew(-30deg);
	  }
	  .cpzx_moduleTitle{
	  	
	  }
	  .cpzxContent{
	  	margin-top: 22px;
	  }
	  .cpzx_module:nth-child(4n){
	  	width: 272px;
	  	/* height: 370px; */
	  	background-color: #fff;
	  	display: inline-block;
	  	margin-top: 17px;
	  	overflow: hidden;
	  	position: relative;
	  	transition: all .2s;
		margin-right: 0px !important;
	  }
</style>